<template>
  <DIV v-loading="loading">
    <el-row class="bg_write">
      <el-row>
        <el-col :span="24" class="content_title">
          <el-col :span="12">
            <HeadTitle></HeadTitle>
          </el-col>
        </el-col>
      </el-row>
      <el-row>
        <tixianSearch @sendtixianSearch="getSearch"></tixianSearch>
      </el-row>
    </el-row>
    <el-row>
      <el-row>
        <el-col :span="24" class="pd_20">
          <el-table ref="multipleTable" :data="list.data" stripe header-row-class-name="head_color" tooltip-effect="dark" style="width: 99.9%"
              @selection-change="handleSelectionChange">
            <el-table-column type="selection" class="tc" width="35"></el-table-column>

            <el-table-column label="头像" min-width="70">
              <template slot-scope="scope">
                <div class="img_bor_tx">
                  <img :src="$fnc.getImgUrl(scope.row.avatar)" alt />
                </div>
              </template>
            </el-table-column>

            <el-table-column label="用户信息" min-width="145">
              <template slot-scope="scope">
                <div class="tab_div">
                  <div>
                    <span>用户名：</span>
                    <span>{{scope.row.username}}</span>
                  </div>
                  <div>
                    <span>用户ID：</span>
                    <span>{{scope.row.uid}}</span>
                  </div>
                  <div>
                    <span>用户等级：</span>
                    <span class="rat" v-show="scope.row.rating_cn">{{scope.row.rating_cn}}</span>
                  </div>
                </div>
              </template>
            </el-table-column>

            <el-table-column label="订单" min-width="153">
              <template slot-scope="scope">
                <div class="tab_div">
                  <div>
                    <span>订单号：</span>
                    <span>{{scope.row.oid}}</span>
                  </div>
                </div>
              </template>
            </el-table-column>

            <el-table-column label="金额" min-width="145">
              <template slot-scope="scope">
                <div class="tab_div">
                  <div>
                    <span>申请金额：</span>
                    <span>{{scope.row.money | keepTwoNum}} {{scope.row.style_cn}}</span>
                  </div>
                  <div>
                    <span>实提金额：</span>
                    <span>{{scope.row.real_money | keepTwoNum}} {{scope.row.style_cn}}</span>
                  </div>
                </div>
              </template>
            </el-table-column>

            <el-table-column label="时间" min-width="180">
              <template slot-scope="scope">
                <div class="tab_div">
                  <div>
                    <span>申请时间：</span>
                    <span>{{scope.row.created_time | getTimeFormat}}</span>
                  </div>
                  <div>
                    <span>完成时间：</span>
                    <span>{{scope.row.created_time_cn | getTimeFormat}}</span>
                  </div>
                </div>
              </template>
            </el-table-column>

            <el-table-column label="状态" min-width="145">
              <template slot-scope="scope">
                <div class="tab_div">
                  <div class="mar_bottom_5">
                    <span>提现方式：</span>
                    <span class="rat tx">{{scope.row.pay}}</span>
                  </div>
                  <div>
                    <span>提现状态：</span>
                    <span class="rat sh">{{scope.row.status_cn}}</span>
                  </div>
                </div>
              </template>
            </el-table-column>

            <el-table-column label="操作" align="center" min-width="80">
              <template slot-scope="scope">
                <el-button :loading="$store.state.isLoading" type="primary" size="mini" @click="showEditDialog(scope.row.id)">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>

          <el-col :span="24" class="table_bottom">
            <el-col :span="4" class="tl">
              <a class="aBtn aBtn_1 aBtn_lan2" @click="allowSelection()">批量通过</a>
              <a class="aBtn aBtn_1 aBtn_lan2" @click="rejectSelection()">批量驳回</a>
            </el-col>

            <el-col :span="20" class="tr">
              <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage"
                  :page-sizes="[5, 10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="list.all_num">
              </el-pagination>
            </el-col>
          </el-col>
        </el-col>

        <WithdrawJfEdit @parent="reload" :show.sync="show" :editId="editId" :clickNum="clickNum"></WithdrawJfEdit>

        <el-dialog :close-on-click-modal="false" title="提现积分" :modal-append-to-body="false" :visible.sync="visible" class="tl size_13" width="800px">
          <DIV v-for="(item,i) in arr" :key="i">
            <br />
            {{item}}
            <br />
          </DIV>
          <div class="mar_bottom_15"></div>
        </el-dialog>
      </el-row>
    </el-row>
  </DIV>
</template>
<script>
import switchc from "../currency/Swich";
import WithdrawJfEdit from "@/components/user/withdraw_jf_edit.vue";
import HeadTitle from "@/components/currency/HeadTitle.vue";
import tixianSearch from "@/components/currency/tixianSearch.vue";
export default {
  data () {
    return {
      show: false,
      loading: false,
      list: [],
      allPage: 0,
      allNum: 0,
      pageSize: 10,
      currentPage: 1,
      editId: "",
      multipleSelection: "",
      arr: [],
      visible: false,
      clickNum: 0,
      updataIndex: "",
      searchAll: {}
    };
  },
  components: {
    switchc,
    WithdrawJfEdit,
    HeadTitle,
    tixianSearch
  },
  methods: {
    handleSelectionChange (val) {
      this.multipleSelection = val;
    },
    allowSelection () {
      this.arr = [];
      if (this.multipleSelection.length == 0) {
        return false;
      }
      this.visible = true;

      for (var i = 0; i < this.multipleSelection.length; i++) {
        var data = { id: this.multipleSelection[i]["id"] };
        this.$api.getUser.getWithdrawJfAllow(data).then(res => {
          this.arr.push(res.data.result);
        });
      }
      var aa = this;
      window.setTimeout(function () {
        aa.getNewsAll();
      }, 1000);
    },
    rejectSelection () {
      this.arr = [];
      if (this.multipleSelection.length == 0) {
        return false;
      }
      this.visible = true;
      var _this = this;
      for (var i = 0; i < this.multipleSelection.length; i++) {
        var data = { id: this.multipleSelection[i]["id"] };
        _this.updataIndex = i;
        this.$api.getUser.getWithdrawJfReject(data).then(res => {
          this.arr.push(res.data.result);
          console.log(_this.updataIndex);
        });
      }

      var aa = this;
      window.setTimeout(function () {
        aa.getNewsAll();
      }, 1000);
    },
    showEditDialog (id) {
      this.show = true;
      this.editId = id;
      this.clickNum++;
    },
    reload (id) {
      this.getNewsAll();
    },
    getSearch (obj) {
      this.searchAll = obj;
      this.getNewsAll(obj);
    },
    getNewsAll (data) {
      this.loading = true;
      var params = {};
      data = data || {};
      params = data;
      this.$api.getUser.getWithdrawJfList(params).then(res => {
        if (res.data.code == 200) {
          this.list = res.data.result;
        }
        this.loading = false;
      });
    },
    handleSizeChange (val) {
      var params = this.searchAll;
      params.page = "";
      params.page_size = val;
      this.getNewsAll(params);
      this.pageSize = val;
    },
    handleCurrentChange (val) {
      this.currentPage = val;
      var params = this.searchAll;
      params.page = val;
      params.page_size = this.pageSize;
      this.getNewsAll(params);
    }
  },
  created () {
    this.getNewsAll();
  },
  computed: {},
  watch: {
    arr () {
      console.log("批量操作", this.arr);
    }
  }
};
</script>

<style lang="less" scoped>
thead > tr > th {
  height: 45px;
  line-height: 45px;
}
td,
th {
  border: 1px solid #e1e3e4;
  font-size: 12px;
}
th {
  background: #f8f8f8;
  font-weight: normal;
  color: #323437;
}
td {
  height: 75px;
  color: #000;
}
.caozuo {
  padding-left: 50px;
}
.pl {
  padding-left: 15px;
}
.chkBox {
  display: block;
  margin: 0 auto;
  width: 18px;
  height: 18px;
  background: #fff;
}
.aBtn_1 {
  padding: 10px;
}
</style>
